<template>
  <a-drawer
    :title="title"
    :width="width"
    placement="right"
    :header-style="{display: 'none'}"
    :body-style="{padding:'10px'}"
    :get-container="false"
    :wrap-style="{ position: 'absolute' }"
    :closable="true"
    @close="tipclose"
    :visible="visible">

    <ship-export-form v-if="delayVisible" @changeName="changeName" ref="realForm" @ok="submitCallback" :disabled="disableSubmit" @close="close"></ship-export-form>
    <div v-else style="position: absolute;
  top: 50%;
  left: 50%;
  background-color: #fff;
-webkit-transform: translateX(-50%) translateY(-50%);">
      <a-spin tip="Loading..." size="large">

      </a-spin>
    </div>
  </a-drawer>
</template>

<script>

  import ShipExportForm from './ShipExportForm'

  export default {
    name: 'ShipExportModal',
    components: {
      ShipExportForm
    },
    data () {
      return {
        delayVisible:false,
        aaa:'display: none',
        title:'基本信息',
        width:'95%',
        visible: false,
        disableSubmit: false
      }
    },
    created() {

      this.$nextTick(()=>{
        this.visible = true
      })

    },
    methods: {

      changeName(data){
        this.title = data;
        console.log(data)
      },
      addclick () {
        this.visible=true
        setTimeout(() =>{
          this.delayVisible = true

        },100);

      },
      add () {
        this.visible=true
        setTimeout(() =>{
          this.delayVisible = true
          this.$nextTick(()=>{
            this.$refs.realForm.add();
          })
        },100);

      },
      edit(record) {
        this.visible = true
        setTimeout(() =>{
          this.delayVisible = true
          this.$nextTick(() => {
            this.$refs.realForm.edit(record)
          })
        },100);

      },
      showdetail(record) {
        this.visible = true
        this.$nextTick(() => {
          this.$refs.realForm.showdetail(record)
        })
      },
      tipclose(){
        var that = this
        this.$confirm({
          title: '是否离开此页面？',

          onOk() {
            that.$emit('close')
          },
          onCancel() {
            console.log('Cancel')
          }
        })
      },
      close () {
        this.$emit('close');
        // this.visible = false;
      },
      handleOk () {
        this.$refs.realForm.submitForm();
      },
      submitCallback(){
        this.$emit('ok')
        this.$emit('close');
        // this.$emit('ok');
        // this.visible = false;
      },
      handleCancel () {
        this.close()
      },
      afterVisibleChange(val) {
        console.log('afterVisibleChange', val);
      },
    }
  }
</script>
<style lang="less" scoped>
  /*.ant-drawer-header {*/
  /*  display: none;*/
  /*  !*position: relative;*!*/
  /*  !*padding: 16px 24px;*!*/
  /*  !*color: rgba(0, 0, 0, 0.65);*!*/
  /*  !*background: #fff;*!*/
  /*  !*border-bottom: 1px solid #e8e8e8;*!*/
  /*  !*border-radius: 4px 4px 0 0;*!*/
  /*}*/
  .ant-drawer-body {
    padding: 10px;
    font-size: 14px;
    line-height: 1.5;
    word-wrap: break-word;
  }
</style>